<?php

?>
<link rel="stylesheet" href="//delivery.ulthon.com/leaflet/leaflet.css">
<script src="//delivery.ulthon.com/leaflet/leaflet.js"></script>
<script src="//delivery.ulthon.com/Leaflet.ChineseTmsProviders-master/src/leaflet.ChineseTmsProviders.js"></script>
<div class="map-container">
    <div id="map">

    </div>


    <div class="info">
        <?php if (!empty($current_demo['intro'])) : ?>
        <div class="intro"><?php echo $current_demo['intro']?>
        </div>
        <?php endif;?>
        <div class="message" style="display: none;"></div>
    </div>

</div>
<style>
    html,
    body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .map-container {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #map {
        width: 100%;
        height: 100%;
    }

    .info {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60%;
        z-index: 9999;

    }

    .intro,
    .message {
        padding: 10px;
        background-color: #fff;
        margin: 10px;
        border: 1px solid #ccc;
    }
</style>

<script>
    var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            key: '<?php echo $config['client_key'] ?>',

        }),
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            key: '<?php echo $config['client_key'] ?>',

        }),
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
            key: '<?php echo $config['client_key'] ?>',

        }),
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
            key: '<?php echo $config['client_key'] ?>',

        });

    var normal = L.layerGroup([normalm, normala]),
        image = L.layerGroup([imgm, imga]);

    var baseLayers = {
        "地图": normal,
        "影像": image,
    }

    var overlayLayers = {

    }

    var map = L.map('map', {
        center: [35.104, 118.3556],
        layers: [normal],
        zoom: 12
    });

    L.control.layers(baseLayers, overlayLayers).addTo(map);
</script>